<template>
    <div class="sixth">
        <div class="sixth-head">
            <h5 class="head1-h5">已提交<span style="color: #3BC997;">({{ num }})</span></h5>
            <h5 class="head2-h5" @click="goto">全部 &gt;</h5>
        </div>
        <el-table :data="tableData" style="width: calc(100% - 40px); height: 216.5px; margin-left:20px ;">
            <el-table-column fixed prop="abstract" label="工单标题">
            </el-table-column>
            <el-table-column prop="type" label="工单类型">
            </el-table-column>
            <el-table-column prop="state" label="工单状态">
            </el-table-column>
            <el-table-column prop="user" label="当前处理人">
            </el-table-column>
            <!-- <el-table-column prop="address" label="地址">
            </el-table-column> -->
            <el-table-column prop="data" label="发起时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
                <template>
                    <el-button @click="handleClick" type="text" size="small">查看</el-button>
                    <!-- <el-button type="text" size="small">处理</el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            num: 0
        }
    },
    mounted() {
        this.$axios({
            url: '/test',
            method: 'get',
            headers: {
                'X-Total-Count': 'true' // 添加 X-Total-Count 头部
            },
            params: {
                state: "已提交",
                _limit: 3
            }
        }).then(({ data, headers }) => {
            this.num = Number(headers['x-total-count'])
            this.$store.commit('changeCreater', this.num)
            this.tableData = data
        })
    },
    methods: {
        goto() {
            this.$router.push('/home/repair/problem')
            this.$store.commit('chagngeProblem', '已提交')
        },
        handleClick() {
            this.$router.push('/home/repair/Addproblem')
        }
    }

}
</script>

<style lang="less" scoped>
.sixth {
    width: calc((100% - 518px) / 3 * 2 - 2px);
    height: 257.5px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px #E1E1E1;
    position: absolute;
    top: 277.5px;
    left: 957px;

    .sixth-head {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #EBEEF5;

        .head1-h5 {
            width: 100px;
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            float: left;
            margin-left: 20px;
            margin-top: 10px;
        }

        .head2-h5 {
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
            float: right;
            margin-right: 20px;
            margin-top: 14px;
            cursor: pointer;
        }
    }

    ::v-deep .el-table tr {
        height: 20px;
    }
}
</style>